import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class App extends Component{

    state = {
        comments:[
            {id:1, name:'jack', content:'沙发'},
            {id:2, name:'rose', content:'板凳'},
            {id:3, name:'tom', content:'楼主好人'},
        ],
        // 评论人
        userName:'',
        // 评论内容
        userContent:''
    }

    // 渲染是否有评论
    renderList(){
        const {comments} = this.state
        if (comments.length === 0){
            return (<div className='no-comment'>暂无评论~</div>)
        }

        return (
            <ul>
                {comments.map(item =>(
                        <li key={item.id}>
                            <h3>评论人:{item.name}</h3>
                            <li>评论内容:{item.content}</li>
                        </li>
                    ))
                }
            </ul>
        )

        // return (
        //     this.state.comments.length === 0
        //         ? (<div className='no-comment'>暂无评论~</div>)
        //         : (<ul>
        //             {
        //                 this.state.comments.map(item =>(
        //                     <li key={item.id}>
        //                         <h3>评论人:{item.name}</h3>
        //                         <li>评论内容:{item.content}</li>
        //                     </li>
        //                 ))
        //             }
        //         </ul>)
        // )
    }

    // 处理表单元素值
    handleForm = e => {
        const {name, value} = e.target
        this.setState({
            [name]: value
        })
    }

    // 发表评论
    addComment = () => {
        const {comments, userName, userContent} = this.state
        // console.log(userName, userContent)

        // 判断不能为空
        if (userName.trim() === '' || userContent.trim() === '') {
            alert("请输入")
            return
        } 
        // ...comments表示把原来的内容全部放入
        const newComments = [{
            id: Math.random(),
            name:userName,
            content:userContent
        }, ...comments]

        this.setState({
            comments: newComments,
            userName:'',
            userContent:''
        })
    }

    render() {
        const {userName, userContent} = this.state
        return (
            <div className='app'>
                <div>
                    <input 
                        className='user' 
                        type='text' 
                        placeholder='请输入评论的人' 
                        value={userName} 
                        name='userName' 
                        onChange={this.handleForm}
                    />
                    <br/>
                    <textarea
                        className='content'
                        cols='30'
                        rows='10'
                        placeholder='输入评论内容' 
                        value={userContent} 
                        name='userContent'   
                        onChange={this.handleForm}
                    />
                    <br/>
                    <button 
                        onClick={this.addComment}
                    >
                        发表评论
                    </button>
                </div>
                {/* 通过条件渲染,决定渲染什么内容 */}
                {/* {
                    this.state.comments.length === 0
                        ? (<div className='no-comment'>暂无评论~</div>)
                        : (<ul>
                            {
                                this.state.comments.map(item =>(
                                    <li key={item.id}>
                                        <h3>评论人:{item.name}</h3>
                                        <li>评论内容:{item.content}</li>
                                    </li>
                                ))
                            }
                        </ul>)
                } */}
                {/* 优化 */}
                {this.renderList()}
            </div>
        )
    }
}

ReactDOM.render(<App/>, document.getElementById('root'))
